
<template>
<!-- <a-modal
    title="多媒体"
    :visible="open"
    :footer="null"
    @cancel="close"
    width="500px"
    :maskClosable='false'
    centered
> -->
  <mu-dialog
    width="100%"
    transition="slide-bottom"
    fullscreen
    class="searchContainer"
    :open="open"
  >
    <mu-appbar color="primary" class="lan-header search-header">
      <slot name="dialog-header">
        <mu-button icon slot="left" @click="close">
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>
        {{title}}
      </slot>
    </mu-appbar>
    <div style="height:300px;">
      <div class="aliPlay" :id="id">
      
      </div>
    </div>
  </mu-dialog>
  
</template>

<script>
  export default {
    name: 'playBack',
    props: {
      source: { 
        type: String,
        default: () => {
          return {}
        }
      },
       id: { 
        type: String,
        default: () => {
          return ''
        }
      },
      index: { 
        type: String,
        default: () => {
          return '0'
        }
      },
      open: { 
        type: Boolean,
        default: () => {
          return true
        }
      },
      ready: { 
        type: Function,
        default: () => {
          return {}
        }
      },
    },
    data() {
      return {
         player:null,
         title:'多媒体',
      }
    },
    computed: {},
    created() {
    },
    mounted() {
     //插入一段css
      var box=document.getElementById("alicss");
      if(!box){
        $('head').append('<link id="alicss" rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />')
      }
    },
    watch: {
      open: {
      handler(newVal, oldVal) {
        if(newVal){
          this.initfn()
        }
      },
      immediate: true,
      deep: true
    },
    },
    methods: {
      close(){
        this.$emit('closeCall')
      },
      initfn(){
        let that = this
        
        this.$nextTick(()=>{
          console.log(this.id)
          this.player = new Aliplayer({
                    "id": this.id,
                    "source": this.source,
                    "videoWidth": "100%",
                    "liveShiftSource":this.source,
                    "autoplay": false,
                    "muted": false,
                    "isLive": false,
          //           "playsinline": true,
          //           "preload": false,
          //           "enableStashBufferForFlv":true,
                    // "snapshot":false,
                    // "defaultDefinition":'FD',
                    // "showBuffer":false,
                    // "x5_type":true,
                    // "mediaType":'video',
          //           "controlBarVisibility": "hover",
                    "diagnosisButtonVisible":false,
                    "useH5Prism": true,
                    "useFlashPrism":false,
                  }, function (player) {
                      // if(this.source.endsWith('m3u8')){
                      //   player.on('ready',()=>{
                          // player.mute();
                          // if(!this.source.startsWith('rtmp')){
                          //   player.play();
                          // }
                          // // 
                          // that.ready(player,that.index)
                          // player.off('ready',()=>{})
                      //   })
                      // }
                  });
          // if(!this.source.endsWith('m3u8')){
          //   this.player.on('ready',()=>{
          //     this.player.mute();
          //     if(!this.source.startsWith('rtmp')){
          //       player.play();
          //     }
          //     that.ready(this.player,that.index)
          //     this.player.off('ready',()=>{})
          //   })
          //  }
          
        })
      }
    },
    destroyed() {
      if(this.player){
        this.player.off('ready',()=>{})
        this.player.dispose()
      }
      //销毁这个样式 id=alicss
      var box=document.getElementById("alicss");
      box && box.remove();
    }
  }
</script>

<style lang="scss" >
  .aliPlay{
    -height:100% !important;
    width:100%;
    video{
      -object-fit: fill !important;
    }
    video::-webkit-media-controls {
        display:none !important;
    }
    .prism-big-play-btn{
      left: 50% !important;
      bottom: 50%;
      transform: translate(-50%,-50%);
    }
  }
</style>
